<template>
	<div ref="VRRef"></div>
</template>

<script setup>
	import * as THREE from 'three';
import { onMounted, ref } from 'vue';
	const VRRef = ref(null)
	
	
	const initThree = () => {
		// 创建场景
		const scene = new THREE.Scene()
		// 创建相机
		const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000 );
		camera.position.set(0,0,0)
		// 创建渲染器
		const renderer = new THREE.WebGLRenderer()
		renderer.setSize(window.innerWidth, window.innerHeight)
		// 把生成的渲染器DOM添加到容器中
		VRRef.value.appendChild(renderer.domElement)
		// 创建球体
		const geometry = new THREE.BoxGeometry(15, 15, 15)
		const imageArr = ['/static/tick2.jpg','/static/tick2.jpg','/static/tick2.jpg', '/static/tick2.jpg', '/static/tick2.jpg', '/static/tick2.jpg']
		const materials = []
		// 创建加载器加载图片
		imageArr.forEach(item => {
			const loader = new THREE.TextureLoader()
			console.log(item)
			loader.load(item, texture => {
				// 生成材质
				const material = new THREE.MeshBasicMaterial({
					map: texture,
					side: THREE.DoubleSide
				})
				console.log(material)
				materials.push(material)
				if(materials.length === 6) {
					// 把材质和球体合并
					const mesh = new THREE.Mesh(geometry, materials)
					// 添加到场景
					scene.add(mesh)
					
					animate()
				}
			})
		})
		
		// 渲染场景和相机
		function animate() {
			requestAnimationFrame(animate)
			renderer.render(scene, camera)
		}
		
	}
	
	
	onMounted(() => {
		initThree()
	})
	
	
</script>

<style>
	       
</style>
